<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    * {
        padding: 0;
        margin: 0;
        list-style: none;
        box-sizing: border-box;
    }

    .box {
        width: 400px;
        height: 400px;
        margin: 50px auto;
        background-color: wheat;
    }

    ul {
        width: 400px;
        height: 400px;
        overflow: hidden;
        position: relative;
    }

    li {
        width: 50px;
        height: 50px;
        float: left;
        font-size: 10px;
        line-height: 50px;
        text-align: center;
        position: absolute;
        background-color: orange;
    }

    .text_b {
        font-size: 20px;
        margin-left: 45%;
    }

    .text_a {
        color: red;
        font-size: 25px;
        margin-left: 43%;
    }
</style>

<body>
    <div class="game">
        <div class="box">
            <ul>
            </ul>
        </div>
        <div class="text_a">还有10秒结束</div>
        <span class="text_b">砸中了0次</span>
    </div>
    <script>

        function Fn() {
            this.oGame = document.querySelector(".game")
            this.oUl = document.querySelector("ul")
            this.oTa = document.querySelector(".text_a")
            this.oTb = document.querySelector(".text_b")
            this.oLi
            this.count = 0
            this.time = 10
            this.t = null
            this.f = null

            this.show()
            this.timer()
            this.end()
        }

        //地鼠出现
        Fn.prototype.show = function () {
            function rand(max, min) {
                return Math.floor(Math.random() * (max - min) + min)
            }
            let res = ""
            for (var i = 0; i < rand(6, 1); i++) {
                res += "<li index=1></li>"
            }
            this.oUl.innerHTML = res
            this.oLi = document.querySelectorAll("li")
            this.oLi.forEach(v => {
                const x = rand(7, 1) * 50
                const y = rand(7, 1) * 50
                v.style.cssText = `left:${x}px;top:${y}px`
                v.innerHTML = "地鼠"
            });
            this.event()
        }


        Fn.prototype.event = function () {
            this.oLi.forEach((v) => {
                v.onclick = () => {
                    if (v.getAttribute("index") == 1) {
                        this.count++
                        v.innerHTML = "敲中了"
                        this.oTb.innerHTML = "砸中了" + this.count + "次"
                        v.style.backgroundColor = "red"
                        v.setAttribute("index", 0)
                    }
                }
            })
        }

        Fn.prototype.timer = function () {
            this.t = setInterval(() => {
                this.oUl.innerHTML = ""
                this.show()
            }, 800)

        }

        Fn.prototype.end = function () {
            this.f = setInterval(() => {
                if (this.time == 0) {
                    alert(`你的分数为${this.count}`)
                    clearInterval(this.t)
                    clearInterval(this.f)
                } else {
                    this.time--
                    this.oTa.innerHTML = `还有${this.time}结束`
                }
            }, 1000)
        }

        new Fn()
    </script>
</body>

</html>